<!-- 修改密码页面 -->
<template>
	<view class="login-bg">
				<nav-bar-sub></nav-bar-sub>
		<image class="img-a" src="../../static/login/bg1.png"></image>
		<!-- <view class="mainTitle">E云教育考试平台</view> -->
		<!-- 注册页 -->
		<view class="t-login">
			<view class="loginTitle">用户密码修改</view>
			<form class="logForm">
				<view class="inputSpan">
					<image src="@/static/login/lock_origin.png"></image>
					<input type="password" name="pwdOld" placeholder="请输入原密码" maxlength="11" v-model="passwordOld" />
				</view>
				<view class="inputSpan">
					<image src="@/static/login/lock.png"></image>
					<input type="password" name="pwdNew" placeholder="请输入新密码" v-model="password" />
				</view>
				<view class="inputSpan">
					<image src="@/static/login/lock.png"></image>
					<input type="password" name="pwdNewAgain" placeholder="请再次输入新密码" v-model="passwordAgain" />
				</view>

				<button @tap="updatePwd()">修 改</button>
				<!-- <view class="otherChoose">
					<span @tap="reg()">立刻登录</span>
					<span @tap="pauseLog()">暂不注册</span>
					<span @tap="forgotPwd()">忘记密码</span>
				</view> -->
			</form>
		</view>
		<image class="img-b" src="../../static/login/bg2.png"></image>
		<u-toast ref="uToast" />
	</view>
</template>
<script>
	import getStuInfo from '@/common/api/login.js'
	import store from '@/store/index.js'; //需要引入store
	export default {
		data() {
			return {
				passwordOld: '', //原密码
				password: '', //新密码
				passwordAgain: '', //新密码再次输入
				logOrSign: true
			};
		},
		onLoad() {},
		methods: {
			updatePwd() {
				this.$api.changePass(this.passwordOld, this.password, this.passwordAgain)
					.then(res => {
						console.log(res);
						if (res.status == '1') {
							this.$refs.uToast.show({
								title: res.message,
								type: 'error',
								// url: '/pages/user/index'
							})
						}else{
							this.$refs.uToast.show({
								title: res.message,
								type: 'success',
								isTab:true,
								url: '/pages/mine/mine'
							})
						}
					})
			}


		}
	};
</script>
<style lang="scss">
	page {
		// background: url('https://s3.ax1x.com/2021/02/10/ywsY4g.png') no-repeat;
		background: linear-gradient(to bottom, #29b6f6, #039be5);
		background-attachment: fixed;
		// background-size: 100% 100%;

	}

	.login-bg {
		display: flex;
		justify-content: center;
		align-items: center;
		height: 100vh;
		flex-direction: column;
	}

	.mainTitle {
		color: white;
		font-weight: bold;
		font-size: 55rpx;
		letter-spacing: 0.2em;
		margin-bottom: 30rpx;
	}

	.img-a {
		width: 100%;
		top: 0;
		position: absolute;
	}

	.img-b {
		width: 100%;
		height: 60px;
		bottom: 0;
		position: absolute;
	}

	.t-login {
		width: 650rpx;
		padding: 55rpx;
		font-size: 28rpx;
		background-color: #ffffff;
		border-radius: 60rpx;
		box-shadow: 5px 5px 7px 0 rgba(0, 0, 0, 0.15);
		z-index: 9;

		.loginTitle {
			text-align: left;
			font-size: 46rpx;
			color: #1296db;
			font-weight: bold;
			margin: 0 0 50rpx 20rpx;
			letter-spacing: 0.2em;
		}

		.inputSpan {
			position: relative;

			input {
				padding: 0 20rpx 0 120rpx;
				height: 90rpx;
				line-height: 90rpx;
				margin-bottom: 50rpx;
				background: #f6f6f6;
				border: 1px solid #f6f6f6;
				font-size: 28rpx;
				border-radius: 50rpx;

				.uni-input-placeholder {
					color: #aeaeae;
				}
			}

			image {
				width: 40rpx;
				height: 40rpx;
				position: absolute;
				left: 40rpx;
				top: 28rpx;
				padding-right: 20rpx;

			}
		}

		.otherChoose {
			text-align: right;
			color: #c0c0c0;
			margin: 40rpx auto 0rpx auto;
			display: flex;
			justify-content: space-between;
		}

		button {
			font-size: 32rpx;
			background: linear-gradient(45deg, #81d4fa, #0288d1);
			color: #fff;
			height: 90rpx;
			line-height: 90rpx;
			border-radius: 50rpx;
		}
	}
</style>
